<template>
     <el-table :data="data" border style="width: 100%">
        <el-table-column type="selection" />
        <el-table-column prop="approval_id" label="审批编号" />
        <el-table-column prop="approval_type" label="审批类型" />
        <el-table-column prop="status" label="当前状态" />
        <el-table-column prop="request_user" label="申请人" />
        <el-table-column prop="request_date" label="申请时间" />
        <el-table-column  label="操作">
          <template #default="{ row }">
            <el-button @click="showDig(row)">查看</el-button>
          </template>
        </el-table-column>
    </el-table>
    <div class="yuyuyu">
        <el-pagination :page-sizes="[10, 20, 30, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total" 
        @current-change="page=>loadList(page)"
        />
    </div>
    <el-dialog v-model="dialogVisible" width="45%" :close-on-click-modal="false" :close-on-press-escape="false" top="5vh"
    :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <span :id="titleId" :class="titleClass">查看审批</span>
        <el-icon @click="close" class="closestylus">
          <Close />
        </el-icon>
      </div>
    </template>
    <el-card class="box-card1">
      <tosochankan :showData="showDatas"/>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">

import {ref} from 'vue'

import { useDialogVisible, useUserLists} from '../hooks'

import tosochankan from '../tosochankan/index.vue'

import { messageshenpiApis } from "@/services/xiaoxi"

const [dialogVisible, setDialogVisible] = useDialogVisible()

const[data,total,loadList]=useUserLists()


interface IProps{
    total:number
    data:Imessage.Xiaoxi[]
    loadData:(page?: number) => Promise<void>
    // setDialogVisible:(visible:boolean)=>void
}

const props=defineProps<IProps>()


const showDatas=ref<any>({})

const showDig= async (row:any)=>{
  dialogVisible.value=true
  let ret = await messageshenpiApis(row.approval_id)
  showDatas.value=ret.data
  console.log(showDatas);
}




</script>

<style lang="scss" scoped>
.yuyuyu {
    width: 600px;
    margin: auto;
    margin-top: 15px;
}


.my-header {
  width: 100%;
  // height: 50px;
  // background-color: rgba(54, 126, 234, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  span {
    width: 90%;
    text-align: center;
  }

  i {
    margin-right: 10px;
  }
  .closestylus {
    cursor: pointer;
  }
}


</style>